<template>
  <div class="page">
    <!-- <button v-i="buttonVisible" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfoClick">获取权限</button> -->
<!--    <button open-type="getUserInfo"-->
<!--            type="defult"-->
<!--            form-type="submit"-->
<!--            size="mini"-->

<!--            @getuserinfo="wxLogin"-->

<!--            >获取权限-->
<!--    </button>-->
<!--   <div>{{time}}</div>-->
  <!-- @click="getUserInfoClick" -->
   <!-- <button  type="defult" form-type="submit" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" @click="getphonenumber">手机号</button> -->
   <!-- <form @submit="getPhoneNumber" :report-submit="true">

    <button form-type="submit">提交</button>
</form> -->

    <div class="banner">
<!--      <img src="../../../static/images/banner.png" mode="widthFix"> -->
     <swiperBox :images="imagesList"></swiperBox>
    </div>
    <div class="home_menu flex">
      <a class="flexitem" href="/pages/product/main?id=2">
        <img src="../../../static/images/chanpin.png" mode="widthFix">
        <div>产品中心</div>
      </a>
      <a class="flexitem" href="/pages/activity/main">
        <img src="../../../static/images/huodong.png" mode="widthFix">
        <div>活动专区</div>
      </a>
      <a class="flexitem" href="/pages/recharge/main">
        <img src="../../../static/images/chongzhi.png" mode="widthFix">
        <div>在线充值</div>
      </a>
      <a class="flexitem" href="/pages/group/main">
        <img src="../../../static/images/pingtuan.png" mode="widthFix">
        <div>拼团</div>
      </a>
    </div>
    <div class="mycard"  v-if="appletCouponList.length">
      <div class="mycard_tittle flex">
        <div class="mycard_title_txt flexitem">优惠券</div>
        <a href="/pages/mycard/main" class="mycard_title_link">全部&gt;</a>
      </div>
      <div class="arch">
        <div class="archbox">

            <div class="arch_item" v-for="item in appletCouponList" :key="item.id" :class="{'arch_red':item.ticketType==1,'arch_blue':item.ticketType==0,'arch_orange':item.ticketType==2}">
              <div class="arch_num" v-if="item.showP==1">
                <template v-if="item.ticketType==1">{{item.discount}}<span >折</span></template>
                <template v-if="item.ticketType==0">{{item.leastCost/1000}}<span >元</span></template>
              </div>
              <div class="arch_other">
                <div >{{item.ticketName}}</div>
                <a @click="getCoupon(item)">立即领取</a>
              </div>
            </div>

<!--          <div class="out-data" v-if="!appletCouponList.length">暂无优惠券</div>-->

        </div>
      </div>
    </div>
    <div class="mycard" v-if="roleData.groupActivityFlag==1&&appletAssembleList.length">
      <div class="mycard_tittle flex">
        <div class="mycard_title_txt flexitem">团购活动</div>
        <a href="/pages/group/main" class="mycard_title_link">全部&gt;</a>
      </div>
      <div class="flex groupbuy">

          <a  class="flexitem" v-for="(item,index) in appletAssembleList" :key="index" @click="goAppletAssembleDetail(item.id)">
            <img :src="item.actv_cover_img" mode="widthFix">
            <div class="groupbuy_title">{{item.actv_content}}</div>
            <div class="price">
              <span class="price_now">¥{{item.grpAmount*0.01}}</span>
              <span class="price_old">¥{{item.item_price*0.01}}</span>
            </div>
          </a>

<!--        <div class="out-data" style="width:100%" v-if="!appletAssembleList.length">暂无团购活动列表</div>-->
      </div>
    </div>
    <div class="mycard" v-if="roleData.marketActivityFlag==1&&appletAssembleNewList.length">
      <div class="mycard_tittle flex">
        <div class="mycard_title_txt flexitem">最新活动</div>
        <a href="/pages/activity/main" class="mycard_title_link">全部&gt;</a>
      </div>
      <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
        <div class="flex recommend" style="width: 45%" v-for="(item,index) in appletAssembleNewList" :key="index">

          <a @click="goAppleAssembleDetail(item)" class="flexitem"  >
            <div class="recommend_pic">
              <img :src="item.pic_url" mode="widthFix">
              <div class="new"></div>
            </div>
            <div class="recommend_title">{{item.actv_content}}</div>
            <div class="recommend_time"><i class="ic_clock"></i>{{item.time_desc}}</div>
          </a>

        </div>
      </div>


<!--        <div class="out-data" style="width:100%" v-if="!appletAssembleNewList.length">暂无团购活动列表</div>-->
    </div>
    <div class="mycard" v-if="(roleData.blockType==0||roleData.blockType==2)&&AppletRecommendList.length">
      <div class="mycard_tittle flex">
        <div class="mycard_title_txt flexitem">精选推荐</div>
        <a href="/pages/product/main?id=1" class="mycard_title_link">全部&gt;</a>
      </div>
      <div class="flex recommend">

        <a  class="flexitem" v-for="(item,index) in AppletRecommendList" @click="goDetail(item.id)">
          <div class="recommend_pic">
            <img :src="item.show_pic" mode="widthFix">
            <div class="new"></div>
          </div>
          <div class="recommend_title">{{item.sp_name}}</div>
          <div class="recommend_buy flex">
            <div class="price flexitem">
              <span class="price_now">¥{{item.xsdj*0.01}}</span>
              <span class="price_old">¥{{item.lsdj*0.01}}</span>
            </div>
            <a  class="addcart"><img src="../../../static/images/gwc.png" mode="widthFix" @click="addCart(item)"></a>
          </div>
        </a>

<!--         <div  class="out-data" style="width:100%" v-if="!AppletRecommendList.length">精选推荐暂无数据</div>-->
      </div>
    </div>
    <div class="mycard" v-if="(roleData.blockType==1||roleData.blockType==2)&&getAppletTechnicianList.length">
      <div class="mycard_tittle flex">
        <div class="mycard_title_txt flexitem">技师推荐</div>
        <a @click="goAppletTechnicianList" class="mycard_title_link">全部&gt;</a>
      </div>
      <div class="person">

        <div class="person_item flex" v-for="(item,index) in getAppletTechnicianList" :key="index">
          <img class="person_pic" :src="item.head_img_url" mode="widthFix">
          <div class="flexitem">
            <div class="person_txt"><span>技师姓名：</span>{{item.name}}</div>
            <div class="person_txt"><span>所在门店：</span>{{item.visible_store}}</div>
            <div class="flex">
              <div class="flexitem">
                <rate :number="item.ceremony_star" :readonly="true"></rate>
              </div>
              <a  class="orderlink" @click="goAppletAppointDetail(item)">立即预约</a>
            </div>
          </div>
        </div>

<!--        <div  class="out-data" style="width:100%" v-if="!getAppletTechnicianList.length">技师推荐暂无数据</div>-->
      </div>
    </div>
       <!-- <getuserInfo ref="getuserInfo" ></getuserInfo> -->
      <mp-modal ref="mpModal" title="提示" content="您未登录,是否登录?" :showCancel="true" @confirm="goLogin" @cancel="handleClose"></mp-modal>
  </div>
</template>

<script>
  import rate from '../../components/rate'
  import * as appId from "@/utils/util"
  import {mapActions} from "vuex"
  import {postRequest} from "@/utils/request"
  import mpModal from 'mpvue-weui/src/modal';
  import {TimeDown} from "@/utils/util"
// import { resolve } from 'dns';
import swiperBox from "../../components/swiperBox"
  // import getuserInfo from "../../components/getuserInfo.vue"
  const Promise = require('es6-promise').Promise
  export default {
    data() {
      return {
        code: "",
        buttonVisible:false,
       iconName:'circle',
        pageNo: 1,
        pageSize: 10,
        time:"",//倒计时
        appletCouponList: [],//优惠劵
        appletAssembleList: [],//团购活动列表
        appletAssembleNewList: [],//最新活动列表
        getAppletTechnicianList:[],//技师
        userInfo:[],
        AppletRecommendList:[],
        imagesList:[],
        roleData:{},
        phone:"",
        userId:"",
        isShow:false
    }
    },

    components: {
      rate,
      swiperBox,
      mpModal,
	  // getuserInfo
    },
    onReady(){
     /* if(!this.userInfo){
        this.$nextTick(()=>{
          console.log(this.$refs)
          this.$refs.getuserInfo.init()
        })

      }*/
    },
    onShow() {
  wx.setNavigationBarTitle({
        title: "首页"
      })

      let that = this;
      setInterval(()=>{
        if(!this.time){
          this.timeShow=false;
        }else{
          this.time=TimeDown("2019-08-18 15:00:00")
        }

      },1000)

      console.log(postRequest)
       this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
       if(this.userInfo){
         that.setUser(this.userInfo)
          that.setIsAuthenticated(true)

       }else{
         setTimeout(()=>{
           this.$nextTick(()=>{
             console.log(this.$refs)
            //  this.$refs.getuserInfo.init()
           })
         },1000)
         // this.$nextTick(()=>{
         //   console.log(this.$refs)
         //   this.$refs.getuserInfo.init()
         // })
         //
         //  wx.showToast({
         //      title: '获取详情信息',
         //      icon: 'none',
         //      duration: 2000
         //    })
        // this.wxLogin();
       }
      // wx.request({
      //   url: 'https://xcx.saas.apis.huidianzhang.com:8080/hdz-apprest/v1.0/appletLogin/getAppid', //仅为示例，并非真实的接口地址
      //   data: {
      //     mid:800007
      //   },
      //   method:"post",
      //   header: {
      //     'content-type': 'application/json;charset=UTF-8'
      //   },
      //   success ({data}) {
      //     if(data.code==0){
      //       let appId=data.result.appId;
      //       wx.setStorageSync('appId',appId)
      //       wx.setStorageSync('secret',  data.result.appKey)
      //       // that.getRoleData()
      //       // // this.getCodeImg()
      //       // that.getBanner();
      //       // that.getMyCouponList();
      //       // that.getAppletAssembleListFun();
      //       // that.getAppletAssembleNewListFun();
      //       // that.getAppletTechnicianListFun()
      //       // that.getAppletRecommendList();
      //     }
      //   }
      // })
      that.getRoleData()
      // this.getCodeImg()
      that.getBanner();
      that.getMyCouponList();
      that.getAppletAssembleListFun();
      that.getAppletAssembleNewListFun();
      that.getAppletTechnicianListFun()
      that.getAppletRecommendList();

    },
    methods: {
      // goDetail(id){
      //   let url="/pages/productdetail/main?id="+id;
      //   wx.navigateTo({ url })
      // },
      goDetail(id){
        let url="/pages/productdetail/main?id="+id;
        wx.navigateTo({ url })
      },
     addCart(item){//添加购物车
        this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
        if(this.userInfo) {
          this.phone=this.userInfo.mobileNo;
          this.userId=this.userInfo.baseUserId;
          //this. getList(0)
         this.addCartItem(item);


        }else{
        this.$refs.mpModal.show();
        }
     },
     addCartItem(item){
        let that=this;
       this.$http.request({
         method: "post",
         url: "/v1.0/appletOperat/appletAddCar",
         body: {
          	"userId":that.userId,
           "phone":that.phone,
           "productId":item.id,
           "appid":appId.appId

         }
       }).then((data)=>{
         if(data.code==0){

             wx.showToast({
             title: '添加成功',
             icon: 'success',
             duration: 2000
           })
         }else{
            wx.showToast({
             title: '添加失败,请重试!',
             icon: 'none',
             duration: 2000
           })
         }
       })
     },
      getRoleData(){
        this.$http.request({
          method: "post",
          url: "/v1.0/appletHome/appletHomePage",
          body: {
           	"appid":appId.appId,


          }
        }).then((data)=>{
          if(data.code==0){
              this.roleData=data.result;
          }
        })
      },
      // getCodeImg(){
      //    wx.request({
      //      url:`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId.appId}&secret=735563fcc24261ba8c67749dd1ea49e7`,
      //      success:(res)=>{
      //        console.log(res)
      //        wx.request({
      //        url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${res.data.access_token}`,
      //         data: {
      //          "width":51,
      //          path:"/pages/index/main"
      //         },
      //         method: "POST",
      //         success (ress) {
      //           console.log(ress)
      //         }
      //         })
      //      }
      //    })
      //   // wx.request({
      //   // url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN',
      //   //  data: {
      //   //   "width":51,
      //   //   path:"/pages/index/main"
      //   //  },
      //   //  success (res) {
      //   //    console.log(res.data)
      //   //  }
      //   //  })
      // },
      goAppleAssembleDetail(row){//活动详情
        let url="/pages/activitydetail/main?id="+row.id;
            // wx.setStorageSync('AppleAssembleList', JSON.stringify(row))
        wx.navigateTo({ url })
      },
      goShare(){
         wx.navigateTo({ url:'/pages/share/main' })
      },
      goAppletTechnicianList(){

         wx.reLaunch({ url: `/pages/appointment/main?page=1`})
      },
       goLogin(){
          let url="/pages/my/main";
          wx.reLaunch({ url:"/pages/my/main"})
              // this.$refs.mpModal.hide();

      },

      getBanner(){//轮播图
                 let that = this;
                this.$http.request({
                  method: "post",
                  url: "/v1.0/appletHome/appletBanner",
                  body: {
                   	"appid":appId.appId,
                    "phone":"",
                    "pageNo":"1",
                    "pageSize":"10"

                  }
                }).then((data)=>{
                  if(data.code==0){
                    this.imagesList=JSON.parse(data.result);
                  }
                })
      },
      handleClose1(){
           this.$refs.mpModal.hide();
      },
      getAppletRecommendList(){//精品推荐
         let that = this;
        this.$http.request({
          method: "post",
          url: "/v1.0/appletHome/appletRecommendList",
          body: {
           	"appid":appId.appId,
            "phone":"",
           	"pageNo":"1",
	           "pageSize":"10"

          }
        }).then((data)=>{
          if(data.code==0){
            this.AppletRecommendList=data.result;
          }

        })
      },
      getCoupon(item){//领取优惠券
        this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
        if(this.userInfo){
           let that = this;
          this.$http.request({
            method: "post",
            url: "/v1.0/appletOperat/appletOperatReCou",
            body: {
             	"userId":this.userInfo.baseUserId,
              "phone":this.userInfo.mobileNo,
              "productId":item.id,
              "appid":appId.appId

            }
          }).then((data)=>{
            if(data.code==0){
                wx.showToast({
                title:"领取成功",
                icon: 'success',
                duration: 2000
              })
            }else{
                wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
        }else{

        }

      },
     chengIcon(){
       if(this.iconName=='circle'){
         this.iconName='checked'
       }else if(this.iconName=='checked'){
         this.iconName='circle'
       }
     },
      ...mapActions(['setUser','setAppletCode','setIsAuthenticated']),
      goAppletAppointDetail(item){//技师预约详情
        let url="/pages/booking/main";
        wx.setStorageSync('appointData',JSON.stringify(item))
        wx.navigateTo({ url })
      },
      goAppletAssembleDetail(id){
       let url="/pages/groupdetail/main?id="+id;
        wx.navigateTo({ url })
      },

      wxLogin(){
        let that=this;
        console.log(123)
         wx.login({
            success(res) {
              console.log(res)
              that.code = res.code;
                 wx.setStorageSync('openid',  that.code)
              //secret

              that.setAppletCode(res.code)
              that.wxGetUserInfo(res.code)

            },
          })

      },
      getMyCouponList() {//优惠劵列表
        let that = this;
        this.$http.request({
          method: "post",
          url: "/1.0/appletHome/appletCouponList",
          body: {
            "appid": appId.appId,
            "pageNo": that.pageNo,
            "pageSize": that.pageSize

          }
        }).then((data) => {
          if (data.code == 0) {
            this.appletCouponList = data.result;
          } else {
            wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        })
        //   .catch((err) => {
        //   wx.showToast({
        //     title: '优惠券请求失败',
        //     icon: 'none',
        //     duration: 2000
        //   })
        // })
      },
      getAppletAssembleListFun() {//团购活动列表
        this.getAppletAssembleListComment(0,'appletAssembleList')
      },
      getAppletAssembleNewListFun() {//z最新活动列表
        this.getAppletAssembleListComment(1,'appletAssembleNewList')
      },
      getAppletAssembleListComment(status,result) {//
          let that=this;
          this.$http.request({
            method: "post",
            url: "/v1.0/appletHome/appletAssembleList",
            body: {
              "appid": appId.appId,
              "pageNo": that.pageNo,
              "pageSize": that.pageSize,
              status: JSON.stringify(status)
            }
          }).then((data) => {
            //console.log(status)
            if (data.code == 0) {
           that[result]=data.result;
           console.log(result)

            } else {
              wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
          //   .catch((err) => {
          //   if (status == 0) {
          //     wx.showToast({
          //       title: '团购活动请求失败',
          //       icon: 'none',
          //       duration: 2000
          //     })
          //   } else {
          //     wx.showToast({
          //       title: '最新活动请求失败',
          //       icon: 'none',
          //       duration: 2000
          //     })
          //   }
          //
          // })

      },
      getAppletTechnicianListFun(){
          let that = this;
        this.$http.request({
          method: "post",
          url: "/v1.0/appletHome/appletTechnicianList",
          body: {
            "appid": appId.appId,
            "pageNo": that.pageNo,
            "pageSize": that.pageSize

          }
        }).then((data)=>{
          if(data.code==0){
              this.getAppletTechnicianList=data.result;
          }else{
            wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
          }
        })
        //   .catch((err)=>{
        //    wx.showToast({
        //         title: '技师推荐请求失败',
        //         icon: 'none',
        //         duration: 2000
        //       })
        // })
      },


      wxGetUserInfo (code) {
        const that = this;
        wx.getUserInfo({
            withCredentials: true,
            success (res) {
              console.log(JSON.stringify(res))
              that.setUser(res)
                // let { encryptedData,userInfo,iv } = res;
              // that.$http.request({
              //   method: "post",
              //   url: "/v1.0/appletLogin/appletLogin",
              //   body: {
              //     appletCode:code,

              //     status: 0,
              //     iv: iv,
              //     extType: "WX",
              //     appid: appId.appId,
              //     encryptedData:encryptedData


              //   }
              // }).then(data => {
              //       console.log(`后台交互拿回数据:`,data);
              //         if (data.code == 0) {
              //           console.log(data)
              //           wx.setStorageSync('userInfo', JSON.stringify(data.result))
              //           wx.showToast({
              //             title: '登录成功',
              //             icon: 'success',
              //             duration: 2000
              //           })
              //         } else {
              //           wx.showToast({
              //             title: `${data.message}`,
              //             icon: 'none',
              //             duration: 2000
              //           })
              //         }
              //       // 获取到后台重写的session数据，可以通过vuex做本地保存
              //   }).catch(err => {
              //       console.log(`自动请求api失败 err:`,err);
              //   })
            },
            fail (err) {
                console.log('自动wx.getUserInfo失败:',err);
                // 显示主动授权的button
                that.buttonVisible = true;
            }
        })
      },
      bindGetUserInfo(e) {
        // console.log('回调事件后触发')
        // console.log(e.mp.detail)
       // console.log(e.mp.detail.encryptedData)
        const self = this;
        if (e.mp.detail.userInfo) {
          //   e.mp.detail.userInfo.nickName=encodeURIComponent(e.mp.detail.userInfo.nickName)

          this.$http.request({
            method: "post",
            url: "/v1.0/appletLogin/appletLogin",
            body: {
              // appletCode: self.code,
              phone: "18838214579",
              status: 0,
              iv: e.mp.detail.iv,
              extType: "WX",
              appid: appId.appId,
              encryptedData: e.mp.detail.encryptedData


            }
          }).then((data) => {
           // console.log(data)
            if (data.code == 0) {
              console.log(data)
              wx.setStorageSync('userInfo', JSON.stringify(data.result))
              wx.showToast({
                title: '登录成功',
                icon: 'success',
                duration: 2000
              })
            } else {
              wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
          console.log('用户按了允许授权按钮')
          let {encryptedData, userInfo, iv} = e.mp.detail;

        } else {
          //用户按了拒绝按钮
          console.log('用户按了拒绝按钮');
        }
      },
      bindViewTap() {
        const url = '../logs/main'
        if (mpvuePlatform === 'wx') {
          mpvue.switchTab({url})
        } else {
          mpvue.navigateTo({url})
        }
      }
    },

    created() {
      wx.setNavigationBarTitle({
        title: "首页"
      })
      // let app = getApp()
    }
  }
</script>

<style scoped>
  .banner img {
    width: 100%;
    display: block;
  }

  .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .flexitem {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .home_menu {
    text-align: center;
    font-size: 0.7em;
    padding: 0.8em 0.5em;
    background: #fff;
  }

  .home_menu img {
    width: 50%;
    margin: 0 auto;
  }

  .mycard {
    background: #fff;
    margin-top: 0.5em;
  }

  .mycard .mycard_tittle {
    padding: 0.6em;
  }

  .mycard .mycard_tittle .mycard_title_txt {
    font-size: 0.9em;
  }

  .mycard .mycard_tittle .mycard_title_txt {
    font-size: 0.9em;
    color: #333;
  }

  .mycard .mycard_tittle .mycard_title_link {
    font-size: 0.7em;
    color: #666;
  }

  .groupbuy, .recommend {
    padding: 0em 0.3em 0.6em 0.3em;
  }

  .groupbuy a, .recommend a {
    margin: 0 0.3em;
  }

  .groupbuy img, .recommend img {
    width: 100%;
  }

  .groupbuy .groupbuy_title, .recommend .recommend_title {
    font-size: 0.8em;
    line-height: 1.6em;
  }

  .price .price_now {
    color: #E4393C;
    font-size: 0.8em;
  }

  .price .price_old {
    color: #999;
    font-size: 0.7em;
    text-decoration: line-through
  }

  .recommend .recommend_time {
    font-size: 0.65em;
    color: #999;
    line-height: 1.6em;
  }

  .recommend_pic {
    position: relative;
  }

  .recommend_pic .new {
    position: absolute;
    top: 0px;
    left: 0.4em;
    width: 1.4em;
    height: 1.7em;
    background: url(../../../static/images/new.png);
    background-size: 100% 100%;
  }

  .addcart img {
    width: 1.4em;
    height: 1.4em;
  }

  .person_item {
    padding: 0em 0.6em 0.6em 0.6em;
    font-size: 0.8em;
  }

  .person_item .person_pic {
    width: 4.5em;
    height: 4.5em;
    border-radius: 50%;
    margin-right: 0.5em;
  }

  .person_item .person_txt {
    line-height: 1.6em;
  }

  .person_item .person_txt span {
    color: #999;
  }

  .person_item .orderlink {
    background: #FF787E;
    height: 2em;
    line-height: 2em;
    width: 6em;
    border-radius: 1em;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 0.9em;
  }

  .person_item .person_other {
    margin-top: 0.3em;
  }

  .ic_clock {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(../../../static/images/clock.png);
    background-size: 100%;
    background-position: center center;
    margin-right: 0.1em;
  }

  .arch {
    background: #fff;
    height: 4.3em;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .archbox {
    white-space: nowrap;
    padding-left: 0.4em;
  }

  .arch_item {
    display: inline-block;
    padding: 0.6em 0;
    height: 2.6em;
    width: 7.5em;
    margin-right: 0.4em;
    background-size: 100%;
    background-position: center center;
  }

  .arch_red {
    background-image: url(../../../static/images/arch1.png);
  }

  .arch_orange {
    background-image: url(../../../static/images/arch2.png);
  }

  .arch_blue {
    background-image: url(../../../static/images/arch3.png);
  }

  .arch_num {
    width: 2em;
    font-size: 1.2em;
    color: #FF787E;
    position: relative;
    text-align: center;
    float: left;
  }

  .arch_num span {
    position: absolute;
    font-size: 0.5em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 1px #FF787E solid;
    display: block;
    bottom: 0px;
    right: 0px;
    background: #fff;
  }

  .arch_other {
    margin-left: 2.8em;
    text-align: center;
    margin-right: 0.2em;
  }

  .arch_other div {
    color: #FF787E;
    font-size: 0.7em;
  }

  .out-data {
    /*margin-left: 2.8em;*/
    text-align: center;
    margin-right: 0.2em;
    font-size: 0.7em;
  }

  .arch_other a {
    background: #FF787E;
    font-size: 0.9em;
    text-align: center;
    font-size: 0.7em;
    color: #fff;
    height: 1.6em;
    line-height: 1.6em;
    display: inline-block;
    padding: 0 0.2em;
    border-radius: 0.2em;
  }
</style>
